<template>
    <div class="left">
        <div style="padding: 0px 5px">
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                style="background-color: transparent; width: 100%"
                text-color="#63A5CC"
                active-text-color="#FFFFFF"
                :unique-opened="true"
                @open="gotoRouteHandle"
            >
                <!-- :collapse-transition="false" -->
                <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu"> </sub-menu>
            </el-menu>
        </div>
    </div>
</template>

<script>
import SubMenu from './sub-menu';
export default {
    name: 'mainSidebar',
    components: {
        SubMenu,
    },
    data() {
        return {
            menuList: [
                {
                    name: '平台概览',
                    menuId: 1,
                    list: [
                        {
                            name: '单位信息',
                            menuId: 11,
                            path: 'unitMap',
                        },
                        {
                            name: '设备地图',
                            menuId: 12,
                            path: 'equipmentMap',
                        },
                    ],
                },
                {
                    name: '实时监控',
                    menuId: 2,
                    list: [
                        {
                            name: '设备监控',
                            menuId: 21,
                            path: 'monitoring',
                        },
                    ],
                },
                {
                    name: '用户信息',
                    menuId: 3,
                    list: [
                        {
                            name: '子账户管理',
                            menuId: 31,
                            path: 'userinfo',
                        },
                        {
                            name: '个人信息',
                            menuId: 32,
                            path: 'information',
                        },
                        {
                            name: '修改密码',
                            menuId: 33,
                            path: 'alterCode',
                        },
                    ],
                },
                {
                    name: '单位管理',
                    menuId: 4,
                    path: 'unit',
                },
                {
                    name: '设备管理',
                    menuId: 5,
                    path: 'equipment',
                },
                {
                    name: '退出登录',
                    menuId: 6,
                    path: 'logout',
                },
            ],
        };
    },
    methods: {
        // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
        gotoRouteHandle(index) {
            if (index == 4 || index == 5) {
                this.$router.push({
                    name: this.menuList.find(item => item.menuId == index).path,
                });
            } else if (index == 6) {
                this.$cookie.delete('token');
                this.$router.push({name: 'login'});
            }
        },
    },
};
</script>

<style scoped lang="scss">
.left {
    background-image: url('@/assets/img/main-left.png');
    width: 220px;
    height: 100%;
    z-index: 999;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    :deep(.el-menu) {
        margin: 0 auto;
        border: 0;

        .el-menu-item {
            // height: 44px;
            font-size: 14px;
            // color: #ffffff;
            background-color: transparent !important;
            background-image: url('@/assets/img/menu2.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
        }

        .el-submenu {
            font-size: 14px;
            background-image: url('@/assets/img/menu2.png');
            z-index: 2999;
            background-size: 100% 120%;
            background-repeat: no-repeat;
            border-bottom: 1px solid rgb(99, 165, 204);
            // height: 44px;
        }

        .el-submenu__title {
            font-size: 14px;
            background-color: transparent !important;
            height: 44px;
            line-height: 44px;
            margin-top: 20px;

            :deep(.el-submenu__title) {
                margin-top: 0px;
            }
        }

        .is-opened {
            .el-submenu__title {
                font-size: 14px;
                background-color: transparent !important;
                height: 44px;
                line-height: 44px;
                margin-top: 20px;
                color: #fff !important;
            }
        }

        // .el-submenu__title:hover,
        .el-submenu.is-opened {
            background-image: url('@/assets/img/menu.png');
            z-index: 4999;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: transparent;
            color: #fff !important;
        }

        .el-menu-item-group__title {
            padding: 0;
        }

        .el-menu-item-group {
            background-image: url('@/assets/img/menu3.png');
            z-index: 5999;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: transparent;

            .el-menu-item {
                // border: 1px solid red !important;
                padding: 0;
                margin: 0;
                border: 0;
                height: 35px;
                line-height: 35px;
                font-size: 12px;
            }
        }

        .el-submenu.is-active {
            .el-submenu__title {
                // border-bottom: 2px solid #4beed4;
            }
        }

        .el-menu-item:not(.is-disabled):hover,
        .el-menu-item:not(.is-disabled):focus {
            // background-image: linear-gradient(to bottom, #0cbfbd, #4fd5c6);
            // border-bottom-color: #4beed4 !important;
        }
    }
}
</style>
